<template>
    <section class="log">
       <img src="../../assets/img/logo.png" alt="" class="log__img" >
       <div class="log__title">
           <span v-for="(char, index) in chars" :key="index" :style="{ '--delay': `${index * 0.1}s` }">
           {{ char }}
           </span>
       </div>
   </section>
</template>

<script setup> 
import { onMounted, ref } from 'vue'

const text = '东风保险经纪数据大屏'
const chars = ref(text.split(''))
</script>

<style lang="scss" scoped>
.log{
    width: 39.4rem;
    height: 3.6rem;   
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    &__img{
        height: 100%;
        margin-left: 1.2rem;
        margin-top: 2px;
    }
    &__title{
        // border: 1px solid red;
        height: 100%;
        flex: 1;
        font-size: 3.4rem;
        font-weight: 500;
        letter-spacing: 2.7px;
        // margin-left: 1px;
        font-style: italic;
        display: flex;
        align-items: center;
        ::v-deep(span) {
            margin: 0;
            padding: 0;
            animation: blink 1.2s ease-in-out infinite;
            animation-delay: var(--delay);
        }
    }
}


@keyframes blink {
    /*A点时的设定*/
    0%,100%{
        color: inherit;
    }
    /*代表B点时的设定*/
    50%{
        color: #979797;
    }  
}

</style>